<template>
  <section class="arctiveListCont">
      <el-row>
        <el-col :xs=0 :sm=1>&nbsp;</el-col>
        <el-col :xs=24 :sm=15>
          <el-card class="box-card"
          v-for="item in articelList"
          :key="item.id"
          shadow="hover"
          @click.native="getDetails(item.id)">
            <div slot="header" class="clearfix">
              <h2>{{item.title}}</h2>
              <span>作者：{{item.auth}}</span>
              <span>发布时间：{{item.createTime}}</span>
            </div>
            <img v-if="item.img" :src="item.img">
            <p>在69年前，在中华人民共和国成立前夕——1949年8月5日，美国发表了《美国和中国的关系》白皮书，这本书连同附件有1054页......</p>
          </el-card>
          <div class="pageWrap">
            <el-pagination
              :page-count='pageCount'
              layout="prev, pager, next">
            </el-pagination>
          </div>
        </el-col>
        <el-col :xs=0 :sm=1>&nbsp;</el-col>
        <el-col :xs=0 :sm=6>
          <personal-introduction></personal-introduction>
        </el-col>
        <el-col :xs=0 :sm=1>&nbsp;</el-col>
      </el-row>
    </section>
</template>

<script>
import {getArticlelist, getArticleDetails} from '@/api/article.js'
import personalIntroduction from '@/views/personalIntroduction'
export default {
  data () {
    return {
      headerImg: require('@/assets/images/index/77.jpg'),
      pageCount: 1,
      articelList: []
    }
  },
  created () {
    this._getArticleList()
  },
  components: {
    personalIntroduction
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    jumpDetails () {
      this.$router.push('/details')
    },
    // 获取文章列表
    _getArticleList () {
      getArticlelist({
        page: 1
      }).then(res => {
        if (res.data.code === 200) {
          this.articelList = res.data.message
          this.pageCount = res.data.pageCount
          console(this.pageCount)
          console.log(this.articelList)
        }
        console.log(res)
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取文章详情
    getDetails (id) {
      getArticleDetails({
        id: id
      }).then(res => {
        if (res.data.code === 200) {
          this.$router.push({name: 'details', params: {cont: res.data.message}})
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.el-card{
  margin: 0.8rem 0.4rem
}
.arctiveListCont >>> .el-pager li{
  min-width: 28px;
}
.pageWrap{
  display: flex;
  justify-content: center;
}
.box-card{
  img{
    width: 50%;
    display: block;
  }
}
</style>
